<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>有声图书</title>
    <link rel="stylesheet" type="text/css" href="css/tplayer.css" />
    <link rel="stylesheet" type="text/css" href="Plugins/FontAwesome4.1/css/font-awesome.min.css" />
    
    <link rel="stylesheet" href="css/basic.css">
	<link rel="stylesheet" href="css/list.css">
	<style>
		#bg{
			background: url(img/course6.jpg) no-repeat 50% 0;
			background-size: cover;
		}
	</style>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/list.js"></script>
    
    <script src="Js/jquery.js"></script>
    <script src="Js/jquery-ui.js"></script>
    <script src="Js/tPlayer.js"></script>
</head>
<body>

<div id="nav">
	<div class="nav_container">
		<h1 class="nav_logo">皮皮图书</h1>
		<ul class="nav_ul">
			<li>
				<a href="index.html" class="active">首页</a>
			</li>
			<li>
				<a href="course.html">排行</a>
			</li>
            <li>
				<a href="l&r.html">有声图书</a>
			</li>
			<li>
				<a href="pay.html">充值</a>
			</li>
			<li>
				<a href="more.html">活动</a>
			</li>
		</ul>
	</div>
</div>

<div id="bg">
    </div>
 <div id="main">   
   <div id="t_wrapper">
        <div id="t_cover">
        	<img src="Images/logo.png">
        </div>
    	<div id="t_top">
    		<div id="t_title_info">
    			<span class="artist"></span>
    			<span class="title"></span>
    		</div>
    	</div>
    	<div id="t_middle">
    		<div id="play"></div>
    		<div id="pause" class="hidden">
    		</div>
    		<div class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" id="t_progress">
                <div id="trackInfo">
                    <div id="error">
    				</div>
                    <div id="current">0:00</div>
                    <div id="duration">0:00</div>
    			</div>
    			<div style="width: 0%;" class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min"></div>
            	<span style="left: 0%;" class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0"></span>
            </div>
    		<span id="prev"></span>
            <span id="next"></span>
    	</div>
    	<div id="t_bottom">
            <div id="range">
                <div id="val"></div>
                <div id="vol"></div>
                <div id="rangeVal"></div>
            </div>
            <div id="t_pls_show" class="noselectpls"></div>
    	</div>
    </div>
    <div id="playlist">
        <ul>
            <li t_cover="0.jpg" t_artist="八月长安" t_name="你好，旧时光01"><a href="#">你好，旧时光01</a>
            	<audio preload="none">
                    <source src="Media/001.mp3" type="audio/mp3">
                    
           	  </audio>
          </li>
            <li t_cover="2.jpg" t_artist="八月长安" t_name="你好，旧时光02">
            	<a href="#">你好，旧时光02</a>
                <audio preload="none">
                    <source src="Media/002.mp3" type="audio/mp3">
                    
                </audio>
            </li>
            <li t_cover="3.jpg" t_artist="八月长安" t_name="你好，旧时光03">
            	<a href="#">你好，旧时光03</a>
                <audio preload="none">
                    <source src="Media/003.mp3" type="audio/mp3">
                    
                </audio>
            </li>
            <li t_cover="4.jpg" t_artist="八月长安" t_name="你好，旧时光04">
            	<a href="#">你好，旧时光04</a>
                <audio preload="none">
                    <source src="Media/004.mp3" type="audio/mp3">
                    
                </audio>
            </li>
              <li t_cover="5.jpg" t_artist="八月长安" t_name="你好，旧时光05">
            	<a href="#">你好，旧时光05</a>
                <audio preload="none">
                    <source src="Media/005.mp3" type="audio/mp3">
                    
                </audio>
            </li>
              <li t_cover="6.jpg" t_artist="八月长安" t_name="你好，旧时光06">
            	<a href="#">你好，旧时光06</a>
                <audio preload="none">
                    <source src="Media/006.mp3" type="audio/mp3">
                    
                </audio>
            </li>
              <li t_cover="7.jpg" t_artist="八月长安" t_name="你好，旧时光07">
            	<a href="#">你好，旧时光07</a>
                <audio preload="none">
                    <source src="Media/007.mp3" type="audio/mp3">
                    
                </audio>
            </li>
              <li t_cover="8.jpg" t_artist="八月长安" t_name="你好，旧时光08">
            	<a href="#">你好，旧时光08</a>
                <audio preload="none">
                    <source src="Media/008.mp3" type="audio/mp3">
                    
                </audio>
            </li>
              <li t_cover="9.jpg" t_artist="八月长安" t_name="你好，旧时光09">
            	<a href="#">你好，旧时光09</a>
                <audio preload="none">
                    <source src="Media/009.mp3" type="audio/mp3">
                    
                </audio>
            </li>
              <li t_cover="10.jpg" t_artist="八月长安" t_name="你好，旧时光10">
            	<a href="#">你好，旧时光10</a>
                <audio preload="none">
                    <source src="Media/010.mp3" type="audio/mp3">
                    
                </audio>
            </li>
        </ul>
    </div>
    
    </div>
    <div id="footer">
	<div class="footer_container">
		皮皮图书
	</div>
</div>
    
</body>
</html>